<template>
  <PcForm
    ref="PcForm"
    v-if="formLists.length"
    :formList.sync="formLists"
    :formConf="formAttrs"
  />
</template>

<script>
import PcForm from "@/components/formGenerator/formComponents/pcForm.vue";
import { deepClone, setFormValue } from "@/components/formGenerator/utils";
import "./common/initPc";

export default {
  name: "FGPcForm",
  components: {
    PcForm,
  },
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    // 传入对应的key & value
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formLists: [],
      formAttrs: {},
    };
  },
  mounted() {
    if (this.value) {
      let obj = JSON.parse(this.value);
      this.formLists = setFormValue(deepClone(obj?.list || []), this.form);
      this.formAttrs = deepClone(obj);
      delete this.formAttrs?.list;
    }
  },
  methods: {
    validateForm(cb) {
      this.$refs["PcForm"].validateForm((valid, form, list) => {
        const newValue = JSON.stringify({ ...this.formAttrs, list });
        this.$emit("update", newValue);
        this.$emit("submit", form, newValue);
        cb(valid, form, newValue);
      });
    },
    submitForm(cb) {
      this.$refs["PcForm"].submitForm((form, list) => {
        const newValue = JSON.stringify({ ...this.formAttrs, list });
        this.$emit("update", newValue);
        this.$emit("submit", form, newValue);
        cb(form, newValue);
      });
    },

    // 重置
    resetForm() {
      this.$refs["PcForm"].resetForm();
    },
  },
};
</script>

<style lang="scss" scoped></style>
